<template>
  <!--  体重管理-->
  <div id="body">

    <div class="box">

      <div class="left">

        <div class="Card">
          个人信息卡片
        </div>

        <div class="TrendChart">
          体重趋势
        </div>

        <div class="SportsRecord">
          运动记录
        </div>

      </div>

      <div class="right">

        <div class="WeightRecord">
          <div style="padding: 15px">
            <p style="font-weight: 500;font-size:16px; display: flex;
  justify-content: center;">
              快捷记录
            </p>
            <div style=" gap: 10px; margin-bottom: 10px;">
              <span style="font-size: 14px; color: #4B5563; margin-left: 10px ">今日体重</span>
              <input type="number" style="margin-left: 5px" placeholder="请输入体重" class="weight-input">
              <span style="font-size: 14px; color: #4B5563;margin-left: 5px">KG</span>
            </div>
            <div class=" btn-container">
              <button class="record-btn">
                记录
              </button>
            </div>
          </div>
        </div>

        <div class="overview">
          本周概览
        </div>

        <div class="foodRecord">
          饮食记录
        </div>

      </div>

    </div>


  </div>
</template>

<script>

export default {
  name: 'WeightManagement',  //体重管理
  data() {
    return {};
  },
  methods: {},
}
;
</script>

<style scoped>

#body {
  width: 100%;
  margin: 0;
  background-color: #f2f4f6;
  height: 100%;
  overflow: auto;
}

.box {
  max-width: 1200px;
  margin: 20px auto;
  display: flex;
  gap: 30px;
}

.left {
  height: 100%;
  flex: 0 0 70%;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

.right {
  height: 100%;
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.Card {
  background-color: white;
  width: 100%;
  height: 150px;
}

.TrendChart {
  background-color: white;
  width: 100%;
  height: 250px;
}

.SportsRecord {
  background-color: white;
  width: 100%;
  height: 150px;
}

.WeightRecord {
  background-color: white;
  width: 100%;
  height: 150px;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.overview {
  background-color: white;
  width: 100%;
  height: 210px;
}

.foodRecord {
  background-color: white;
  width: 100%;
  height: 190px;
}

.weight-input {
  width: 50%;
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.3s ease;
}

.weight-input:focus {
  border-color: #3B82F6;
}

.btn-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.record-btn {
  padding: 6px 16px;
  background-color: #10b981;
  color: white;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease, border 0.3s ease;
  width: 100%;
}

/* 鼠标移入按钮时黑色边框 */
.record-btn:hover {
  background-color: #10b981;
  border: 1px solid #000;
}

</style>
